import React from 'react';
import '../static/main.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import pdf  from '../images/pdf.png';
import * as request from '../utils/request';
import { message } from 'antd';
import $ from 'jquery'
import go from '../utils/global';

//搜索结果
class SearchResultMiddle extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      name:'搜索结果',
      artList:[]
    }

    //文章
    this.pageNum = 0
    this.artListEle = null

  }

  //切换tag(通过子组件控制父组件数据实现)
  changeTitleTag = (ckey) => {
    this.props.changeCurSearchData({key:ckey,value:this.props.searchData[ckey]})
  }

  //关闭标签
  closeTitleTag = (ckey) => {
    console.log('closeTitleTag')
    this.props.changeCurSearchData({type:'delete',key:ckey})
  }

  componentDidMount(){
    //添加滚动条
    go.addSscrollbar(['#resource-inner', '#col-m-inner'])

    //文章列表数据
    this.getArtList()
  }

  componentDidUpdate(){
    console.log('searchResult update......')
    //添加滚动条
    go.addSscrollbar(['#resource-inner', '#col-m-inner'])
  }

  //获取文章数据
  getArtList(){
    console.log('pageNum', this.pageNum);
    let content = 'test'
    console.log('this.props.curSearchData',this.props.curSearchData)

    if(!$.isEmptyObject(this.props.curSearchData.value)){
      content = this.props.curSearchData.value.answer.text.val_format
    }
    let curParserData = this.props.curParserData.value
    
    message.loading('loading...');
    request.post('api/qa/searcher', {content:content,page_num:this.pageNum,page_size:5,parse:curParserData}).then(res => {
        // console.log(res);
        if(!res.errCode && !$.isEmptyObject(res.data)){
          console.log('getArtList......')

          let data = res.data
          if(data.answer.artList && data.answer.artList.length){
            let artList = go.copy(data.answer.artList)
            let cur_artList = go.copy(this.state.artList)
            let new_artList = cur_artList.concat(artList)
            this.setState({artList:new_artList})
          }
          this.pageNum++
        }
        message.destroy()
    })
  }

  //滚动加载更多
  onArtListScroll = () => {
    console.log('onArtListScroll....')
    if(!this.artListEle){
      console.log('onArtListScroll11....')
      return 
    }

    // 未滚动到底部
		if (( this.artListEle.scrollHeight - this.artListEle.clientHeight ) > this.artListEle.scrollTop) {
        //未到底
        // console.log('未到底')
    } else {
      //已到底部
      this.getArtList()
    }

  }
  

  render () {
    let tags = []
    let searchData = this.props.searchData
    let curSearchData = this.props.curSearchData
    // console.log(searchData)

    if(!searchData || $.isEmptyObject(searchData)){
      return null
    }

    if(!curSearchData || $.isEmptyObject(curSearchData.value)){
      return null
    }

    if($.isEmptyObject(curSearchData.value.answer)){
      return null
    }
    let cdata = curSearchData.value
    //处理tag显示
    for (let key in searchData) {
      let tagName = searchData[key].answer.text.val_format
      let isHide = searchData[key].isHide
      // console.log('key',key)
      // console.log('curkey',curSearchData.key)
      // console.log('type:',typeof curSearchData.key)
      if(isHide){
        continue
      }
      let ison = (key+'') === (curSearchData.key+'') ? ' on' : ''
      tags.push(
      <span className={"tag"+ison} key={go.uid()}><b onClick={()=>{this.changeTitleTag(key)}}>{tagName}</b><em onClick={()=>{this.closeTitleTag(key)}}>×</em></span>
      )
    }

    //显示数据分析
    let tableDom
    if(!$.isEmptyObject(cdata.answer.table)){
      let table = cdata.answer.table
      tableDom=(
        <div className="tag-content">
          <div className="line-title"><span>数据分析</span></div>
          <div className="table-content">
            <table className="table table-bordered">
              <thead>
                <tr>
                  {
                    table.body.th.map((item,index)=>{
                      return (
                        <th key={go.uid()}>{item.name}</th>
                      )
                    })
                  }
                </tr>
              </thead>
              <tbody>
                  {
                    table.body.tr.map((item,index)=>{
                      //转换obj为arr
                      let itemArr = []
                      for(let k in item){
                        itemArr.push(item[k])
                      }

                      return (
                        <tr key={go.uid()}>
                          {
                            itemArr.map((trRow, key)=>{
                              return (<th key={go.uid()} scope="row">{trRow.td}</th>)
                            })
                          }
                        </tr>
                      )
                    })
                  }
              </tbody>
            </table>
          </div>
        </div>
      )
    }

    //显示语料匹配
    let artListDom
    if(!$.isEmptyObject(this.state.artList)){
      artListDom=(
        <div className="tag-content">
          <div className="line-title"><span>语料匹配</span></div>
          <ul className="article-list">
            {
              this.state.artList.map((item,index)=>{
                return (
                  <li className="mb15 mbtn" key={go.uid()}>
                    <a href={item.art_url} target="_blank" rel="noopener noreferrer">
                      <span className="file-name"><img src={pdf} alt=""></img>{item.art_title}</span>
                    </a>

                    <p>{item.text}</p>
                  </li>
                )
              })
            }
          </ul>
        </div>
      )
    }
    return (
      <div className="search-result-cnt">
        {/* 中间 */}
        <div id="col-m" className="col-m-search" ref={(el) => { this.artListEle = el }} onScroll={() => this.onArtListScroll()}>
          <div id="col-m-inner">
            <div className="tag-list mb20">
              {tags}
            </div>

            {/* 数据分析 */}
            {tableDom}

            {/* 语料匹配 */}
            {artListDom}

          </div>
        </div>

        {/* 右侧 */}
        <div id="col-resource">
          <div id="resource-inner">
          <div className="line-title mt10 pl15"><span>学习来源</span></div>
          <ul className="article-list">
            <li>
              <a href="http://www.baidu.com" target="_blank" rel="noopener noreferrer">
                <span className="title cut">专访周宏伟，未来要在天津做好多基础专访周宏伟，未来</span>
              </a>
              <span className="stime">2019-08-19</span>
            </li>

            <li>
              <span className="title cut">中国智能制造现状</span>
              <span className="stime">2019-08-19</span>
            </li>

            <li>
              <span className="title cut">中国智能制造现状</span>
              <span className="stime">2019-08-19</span>
            </li>
            
          </ul>

      </div>
      </div>
      </div>
    );
  }
}

export default SearchResultMiddle